<template>
 
  <view class="container flex--col">
	<UncompletedWarn v-if="!taskCompleted">未完成用户登录任务，无法为你匹配出行伙伴。</UncompletedWarn>
	<template  v-else>
		  <AppNavigation>
			  <RealtimePosition></RealtimePosition>
		  </AppNavigation>
		<view class="chux-section flex--col">
			<view class="text--main-dark">你的出行名片</view>
			<PersonalCard :userId="userId"></PersonalCard>
		</view>
		<view class="chux-section flex--col"  v-if="role === Role.ROLE_BLIND">
			<view class="text--main-dark">定制路线</view>
			<PersonalRoutes :role="role"></PersonalRoutes>
		</view>
		<view class="chux-section flex--col">
			<navigator class="chux-sectiong-heading flex--row" url="/pages/travelRecords/travelRecords">
				<view class="text--main-dark">最近要出行</view>
				<image class="icon--middle" src="@/static/chux/go.svg" aria-label="所有出行列表"></image>
			</navigator>
			<PersonalTravels></PersonalTravels>
		</view>
	</template>
  </view>
</template>

<script>
	import AppNavigation from "@/components/AppNavigation/AppNavigation.vue"
	import RealtimePosition from "@/components/RealtimePosition/RealtimePosition.vue"
	import PersonalCard from "./components/PersonalCard.vue"
	import PersonalRoutes from "./components/PersonalRoutes.vue"
	import PersonalTravels from "./components/PersonalTravels.vue"
	import UncompletedWarn from "@/components/UncompletedWarn/UncompletedWarn.vue"
	import {checkRole,checkTaskCompleted} from "@/core/app.js"
	import * as Role from "@/core/constant/role.js"
	import * as RouteApi from "@/api/route/route.js"
	import * as TravelApi from "@/api/travel/travel.js"
	import { data } from "../../uni_modules/uview-ui/libs/mixin/mixin";
	
		
	export default {
	  components:{
		  PersonalRoutes,
		  PersonalTravels,
		  RealtimePosition,
		  PersonalCard,
		  AppNavigation,
		  UncompletedWarn
	  },
	  data() {
		return {
		  inactiveTravels:[],
		  taskCompleted:false,
		  role:Role.ROLE_UNDEFINED,
		  Role,
		  userId:0,
		}
	  },
	  onShow() {
		this.taskCompleted = checkTaskCompleted()
		this.role = checkRole()
	  },
	  onLoad(){
		  this.userId = this.$store.getters.userId
	  }
	};
</script>

<style lang="scss">
	page{
		width:100%;
		height:100%;
		background-color: #FFFFFF;
	}
	.text--main-dark{
		font-size: 20px;
		font-weight: 700;
		color:#333;
	}
	
	.container{
		padding:12px 0px;
		margin:auto;
		width:600rpx;
		gap:32px;
		
		.chux-section{
			gap:8px;
			
			.chux-sectiong-heading{
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
